<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/logo.jpg">
</head>
<body class="body">
<!-- 导航 -->
<ul class="btn-nav row">
    <li class="panel-nav col" href-url="demo/btn.html">
        <div class="btn-nav-icon">
            <i class="layui-icon">&#xe621;</i>
        </div>
        <div class="btn-nav-word">
            <span>40</span>
            <span class="layui-elip">按钮(菜单可自定义)</span>
        </div>
    </li>
    <li class="panel-nav col" href-url="demo/form.html">
        <div class="btn-nav-icon">
            <i class="layui-icon">&#xe628;</i>
        </div>
        <div class="btn-nav-word">
            <span>100</span>
            <span class="layui-elip">引擎</span>
        </div>
    </li>
    <li class="panel-nav col" href-url="demo/table.html">
        <div class="btn-nav-icon">
            <i class="layui-icon">&#xe609;</i>
        </div>
        <div class="btn-nav-word">
            <span>20</span>
            <span class="layui-elip">发布</span>
        </div>
    </li>
    <li class="panel-nav col" href-url="demo/tab-card.html">
        <div class="btn-nav-icon">
            <i class="layui-icon">&#xe62c;</i>
        </div>
        <div class="btn-nav-word">
            <span>30</span>
            <span class="layui-elip">图表</span>
        </div>
    </li>
    <li class="panel-nav col" href-url="demo/progress-bar.html">
        <div class="btn-nav-icon">
            <i class="layui-icon">&#xe60e;</i>
        </div>
        <div class="btn-nav-word">
            <span>80</span>
            <span class="layui-elip">记录</span>
        </div>
    </li>
    <li class="panel-nav col" href-url="demo/folding-panel.html">
        <div class="btn-nav-icon">
            <i class="layui-icon">&#xe63a;</i>
        </div>
        <div class="btn-nav-word">
            <span>5</span>
            <span class="layui-elip">消息</span>
        </div>
    </li>
</ul>
<!-- 两列 -->
<div class="row">
    <div class="panel-2 col">

        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">图表</h2>
                <div class="layui-colla-content layui-show">
                    <div id="main-map" style="height: 300px;overflow: hidden;"></div>
                </div>
            </div>
        </div>

    </div>
    <div class="panel-2 col">

        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">表格</h2>
                <div class="layui-colla-content layui-show">

                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>昵称</th>
                            <th>加入时间</th>
                            <th>行号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>贤心</td>
                            <td>2019-10-22</td>
                            <td>01001</td>
                        </tr>
                        <tr>
                            <td>万宁宁</td>
                            <td>2019-11-29</td>
                            <td>01092</td>
                        </tr>
                        <tr>
                            <td>可璐</td>
                            <td>2020-1-6</td>
                            <td>01609</td>
                        </tr>
                        <tr>
                            <td>姚道益</td>
                            <td>2020-3-24</td>
                            <td>01301</td>
                        </tr>
                        <tr>
                            <td>周燕</td>
                            <td>2020-3-29</td>
                            <td>01019</td>
                        </tr>
                        <tr>
                            <td>李从南</td>
                            <td>2020-11-30</td>
                            <td>01301</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>

    </div>
</div>
<!-- 三列 -->
<!-- <div class="row">
    <div class="panel-3 col">

        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">图表</h2>
                <div class="layui-colla-content layui-show">
                    <div id="main-bing" style="height: 300px;overflow: hidden;"></div>
                </div>
            </div>
        </div>

    </div>
   
</div> -->

<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../frame/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // 方法
    layui.use(['element','form'], function(){
        var element = layui.element()
        ,form       = layui.form()
        ,$          = layui.jquery;

        // 子页面跳转新页面
        $(document).on('click','.btn-nav li.panel-nav', function() {
            if($(this).attr('href-url')){
                console.log($(this).attr('href-url'));
                // 调用父级跳转刷新方法
                parent.setRUrl($(this).attr('href-url'));
            }
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-map'));

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            title: {
                text: '示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["客户管理","员工管理","公司管理","岗位管理","资金管理"]
            },
            yAxis: {},
            series: [{
                name: '管理',
                type: 'bar',
                data: [35, 20, 26, 10,30]
            }]
        });

        // 基于准备好的dom，初始化echarts实例
        var chart = echarts.init(document.getElementById('main-bing'));

        // 配置
        chart.setOption({
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:400, name:'搜索引擎'},
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:274, name:'联盟广告'},
                        {value:235, name:'视频广告'}
                    ]
                }
            ]
        });

    });
</script>
</body>
</html>